<template>
  <div class="settings">
    <h1>系统设置</h1>
    
    <div class="settings-info">
      <p>配置AI药物相互作用检查器的相关参数。</p>
    </div>
    
    <div class="settings-section">
      <h2>AI模型配置</h2>
      <div class="settings-content">
        <div class="form-group">
          <label for="aiModel">AI模型选择:</label>
          <select id="aiModel" v-model="settings.aiModel">
            <option value="spark">讯飞星火</option>
            <option value="google">Google Med-PaLM</option>
          </select>
          <p class="help-text">选择用于药物相互作用分析的AI模型</p>
        </div>
        
        <div class="form-group">
          <label for="sparkAppId">讯飞星火 App ID:</label>
          <input 
            id="sparkAppId" 
            v-model="settings.sparkAppId" 
            type="password" 
            placeholder="请输入App ID"
          />
          <p class="help-text">讯飞星火AI服务的App ID</p>
        </div>
        
        <div class="form-group">
          <label for="sparkApiKey">讯飞星火 API Key:</label>
          <input 
            id="sparkApiKey" 
            v-model="settings.sparkApiKey" 
            type="password" 
            placeholder="请输入API Key"
          />
          <p class="help-text">讯飞星火AI服务的API Key</p>
        </div>
        
        <div class="form-group">
          <label for="sparkApiSecret">讯飞星火 API Secret:</label>
          <input 
            id="sparkApiSecret" 
            v-model="settings.sparkApiSecret" 
            type="password" 
            placeholder="请输入API Secret"
          />
          <p class="help-text">讯飞星火AI服务的API Secret</p>
        </div>
      </div>
    </div>
    
    <div class="settings-section">
      <h2>openFDA数据库配置</h2>
      <div class="settings-content">
        <div class="form-group">
          <label for="fdaApiKey">openFDA API Key:</label>
          <input 
            id="fdaApiKey" 
            v-model="settings.fdaApiKey" 
            type="password" 
            placeholder="请输入API Key"
          />
          <p class="help-text">openFDA数据库API访问密钥（可选）</p>
        </div>
      </div>
    </div>
    
    <div class="settings-section">
      <h2>系统行为配置</h2>
      <div class="settings-content">
        <div class="form-group">
          <label class="checkbox-label">
            <input 
              v-model="settings.autoCheck" 
              type="checkbox" 
            /> 自动检查药物相互作用
          </label>
          <p class="help-text">添加药物后自动进行相互作用检查</p>
        </div>
        
        <div class="form-group">
          <label class="checkbox-label">
            <input 
              v-model="settings.enableAiAnalysis" 
              type="checkbox" 
            /> 启用AI深度分析
          </label>
          <p class="help-text">对高风险相互作用启用AI深度分析</p>
        </div>
      </div>
    </div>
    
    <div class="action-buttons">
      <button @click="saveSettings" class="save-btn">保存设置</button>
      <button @click="resetSettings" class="reset-btn">重置为默认</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Settings {
  aiModel: string
  sparkAppId: string
  sparkApiKey: string
  sparkApiSecret: string
  fdaApiKey: string
  autoCheck: boolean
  enableAiAnalysis: boolean
}

// 默认设置
const defaultSettings: Settings = {
  aiModel: 'spark',
  sparkAppId: '',
  sparkApiKey: '',
  sparkApiSecret: '',
  fdaApiKey: '',
  autoCheck: true,
  enableAiAnalysis: true
}

// 表单数据
const settings = ref({ ...defaultSettings })

// 保存设置
const saveSettings = () => {
  // 在实际应用中，这里会将设置保存到localStorage或发送到后端
  localStorage.setItem('appSettings', JSON.stringify(settings.value))
  alert('设置已保存')
}

// 重置设置
const resetSettings = () => {
  if (confirm('确定要重置所有设置为默认值吗？')) {
    settings.value = { ...defaultSettings }
    localStorage.removeItem('appSettings')
    alert('设置已重置为默认值')
  }
}
</script>

<style scoped>
.settings {
  max-width: 1200px;
  margin: 0 auto;
}

.settings-info {
  background-color: #e3f2fd;
  border: 1px solid #bbdefb;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 2rem;
  text-align: center;
}

.settings-section {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.settings-section h2 {
  color: #42b983;
  border-bottom: 2px solid #42b983;
  padding-bottom: 0.5rem;
  margin-top: 0;
}

.settings-content {
  margin-top: 1rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.checkbox-label {
  font-weight: normal;
  cursor: pointer;
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box;
}

.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus,
.form-group select:focus {
  outline: none;
  border-color: #42b983;
}

.form-group input[type="checkbox"] {
  margin-right: 0.5rem;
}

.help-text {
  color: #666;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.save-btn,
.reset-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.save-btn {
  background-color: #42b983;
  color: white;
}

.save-btn:hover {
  background-color: #359c6d;
}

.reset-btn {
  background-color: #6c757d;
  color: white;
}

.reset-btn:hover {
  background-color: #5a6268;
}

@media (max-width: 768px) {
  .action-buttons {
    flex-direction: column;
  }
  
  .save-btn,
  .reset-btn {
    width: 100%;
  }
}
</style>